<template>
  <div id="safe">
    <top-bar :title="title"></top-bar>
    <div class="safety_box">
      <h6>如遇到危险，请保持冷静</h6>
      <p>请勿谎报警情，将依法承担法律责任</p>
      <div class="safe_box_bg">
        <div class="safety_list">
          <p>当前位置(仅供参考)</p>
          <h6 id="formattedAddress">{{formattedAddress}}</h6>
        </div>
      </div>
      <div class="safe_bottom_box">
        <div class="safety_botttom">
          <h6>
            点击后，平安到家会将您的位置或行程通过短信发送紧急联系人
            <span>[家人]</span>
          </h6>
          <p @click="callSafe">呼叫110</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Tabs, Icon, Field, InputItem, Toast, Radio, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import QRCode from 'qrcodejs2';
import weixinUtils from '@/common/weixinUtils';
import Utils from '@/common/pakjUtils';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import { mapGetters, mapActions, mapMutations } from 'vuex';
import http from '@/common/http';
var CryptoJS = require('crypto-js');
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [Radio.name]: Radio,
    [InputItem.name]: InputItem,
  },
  data() {
    return {
      title: '一键报警',
      formattedAddress: '',
    };
  },
  created() {
    // 获取当前定位
    this.formattedAddress = sessionStorage['formattedAddress'];
  },
  methods: {
    callSafe() {
      window.location.href = 'tel://110';
    },
  },
};
</script>
<style lang="stylus">
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6 {
  display: block;
  font-size: 22px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}

.sharecover {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
  z-index: 9999;
}

.code_box {
  position: absolute;
  z-index: 10000;
  top: 35%;
  left: 35%;
}

.qrcode_text {
  font-size: 28px;
  color: #fff;
  marign-top: 20px;
}

.share_box {
  position: absolute;
  z-index: 10000;
  right: 2%;
  font-size: 28px;
  color: #fff;
  width: 240px;
}

.share_box img {
  width: 120px;
  position: relative;
  left: 100px;
}

.share_box p {
  margin-top: 10px;
}

#safe {
  height: 100vh;
  background-color: color-primary-background;
}

.safety_box > h6 {
  font-size: 40px;
  color: #F72D03;
  margin-left: 40px;
  margin-top: 40px;
  font-weight: 400;
}

.safety_box > p {
  font-size: 30px;
  color: #666;
  margin-left: 40px;
}

.safe_box_bg {
  margin: 20px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 8px 0px rgba(191, 191, 191, 0.5);
  border-radius: 10px;
  padding-bottom: 30px;
}

.safety_list {
  padding-left: 30px;
  padding-top: 30px;
}

.safety_list p {
  font-size: 28px;
  color: #999;
}

.safety_list h6 {
  font-size: 30px;
  font-weight: 400;
  color: #333;
  margin-right: 30px;
  margin-top: 10px;
}

.driver_sex, .driver_carColor {
  margin-left: 10px;
}

.safety_list em {
  font-style: normal;
  margin-left: 10px;
}

.safe_bottom_box {
  position: fixed;
  bottom: 20px;
  width: 100%;
}

.safety_botttom {
  margin: 0px 20px;
}

.safety_botttom h6 {
  font-weight: 400;
  font-size: 24px;
  color: #666;
  margin-bottom: 10px;
}

.safety_botttom h6 span {
  color: #FF6917;
}

.safety_botttom p {
  text-align: center;
  height: 98px;
  line-height: 98px;
  font-size: 36px;
  color: #fff;
  background-color: #ff6917;
  border-radius: 10px;
}

.share_trip {
  margin: 20px 20px;
}

.share_trip p {
  text-align: center;
  height: 98px;
  line-height: 98px;
  font-size: 36px;
  color: #FF6917;
  border-radius: 10px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
}
</style>
